<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>🎵 上传你的音乐</title>
  <style>
    body {
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #f2f4f7;
      margin: 0;
      padding: 20px;
      color: #333;
    }
    .container {
      max-width: 600px;
      margin: 60px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      padding: 30px;
      text-align: center;
    }
    h2 {
      margin-bottom: 20px;
      color: #444;
    }
    input[type="file"] {
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 100%;
    }
    input[type="submit"] {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
      width: 100%;
    }
    input[type="submit"]:hover {
      background-color: #218838;
    }
    .note {
      margin-top: 15px;
      font-size: 14px;
      color: #777;
    }
    .api-info {
      margin-top: 40px;
      text-align: left;
      font-size: 15px;
      line-height: 1.6;
      background: #e9f7ef;
      border-left: 4px solid #28a745;
      padding: 20px;
      border-radius: 6px;
      color: #2f5d32;
    }
    .api-info code {
      background: #d1e7dd;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 14px;
    }
    .api-link {
      margin-top: 10px;
      font-weight: bold;
    }
    @media (max-width: 480px) {
      .container {
        margin: 30px 10px;
        padding: 20px;
      }
      .api-info {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>🎵 批量上传你的 MP3 音乐</h2>
    <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="musicFiles[]" multiple accept=".mp3" required />
      <input type="submit" value="上传音乐" />
      <div class="note">支持批量选择，多首 MP3 一次上传</div>
    </form>

    <div class="api-info">
      <h3>🎧 API 调用说明</h3>
      <p>上传完成后，系统会自动更新音乐列表。你可以通过以下接口获取随机音乐播放地址：</p>
      <ul>
        <li><strong>随机音乐接口（API）：</strong><code>https://mp3.52yzk.com/rand-music.php</code></li>
        <li>访问该地址会<strong>自动跳转到随机一首 MP3 文件的直链</strong>，方便播放器直接使用。</li>
      </ul>
      <p>例如，你可以将以下链接填入播放器的音乐源设置，播放器每次请求都会播放随机一首音乐：</p>
      <div class="api-link">
        <a href="https://mp3.52yzk.com/rand-music.php" target="_blank" rel="noopener noreferrer">
          https://mp3.52yzk.com/rand-music.php
        </a>
      </div>
      <p>示例播放器代码：</p>
      <pre><code>&lt;audio controls src="https://mp3.52yzk.com/rand-music.php"&gt;&lt;/audio&gt;</code></pre>
    </div>
        <div class="api-info" style="background:#fef8e7; border-left-color:#f0ad4e; color:#8a6d3b;">
      <h3>✅ 宝塔面板访问限制设置教程</h3>
      <p>如果你使用的是宝塔面板部署本项目，强烈建议为上传功能设置登录保护，防止他人恶意上传。</p>
      <p>已为你准备好详细图文教程：</p>
      <a href="bt-limit-guide.html" target="_blank" style="display:inline-block; margin-top:10px; background-color:#f0ad4e; color:white; padding:10px 16px; border-radius:4px; text-decoration:none;">
        📘 查看教程文档
      </a>
    </div>

  </div>
</body>
</html>
